<template>
  <div >
    <swiper :lunbotuList="lunbotuList" :full="true"></swiper>
    <!-- 九宫格到六宫格的改造 -->
     <ul class="mui-table-view mui-grid-view mui-grid-9">
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/newslist">
                <img src="@/assets/menu1.png" alt="">
                <div class="mui-media-body">新闻资讯</div></router-link></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/photolist">
                <img src="@/assets/menu2.png" alt="">
                <div class="mui-media-body">图片分享</div></router-link></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/goodslist">
                <img src="@/assets/menu3.png" alt="">
                <div class="mui-media-body">商品购买</div></router-link></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <img src="@/assets/menu4.png" alt="">
                <div class="mui-media-body">留言反馈</div></a></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <img src="@/assets/menu5.png" alt="">
                <div class="mui-media-body">视频专区</div></a></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <img src="@/assets/menu6.png" alt="">
                <div class="mui-media-body">联系我们</div></a></li>
		  </ul> 

  </div>
</template>

<script>
import swiper from '@/components/subcomponents/swiper'

export default {
  data(){
    return {
      lunbotuList:[]//保存轮播图的数组
    }
  },
  created(){
     this.getLunbotu()
  },
  methods:{
   async getLunbotu(){
     const {data} = await this.$http.get('api/getlunbo')
     if(data.status == 0){
         this.lunbotuList = data.message
     }
    else{
          Toast('加载轮播图失败。。。')
        }
   }
 },
 components:{
   swiper
 }
}
</script>
<style lang="scss" scoped>
.mui-table-view.mui-grid-view.mui-grid-9{
  background-color: #fff;
  border:none;

  img {
    width: 60px;
    height: 60px;
  }
}
.mui-table-view-cell.mui-media{
  border:none;
}
</style>

